<template>
<!--  历史温度折线图-->
  <div id="temperature-line" style="width: 100%; height: 24vh; margin: 2px auto;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "TemperatureLine",
  props: ['historyList'],
  watch: {
    historyList() {
      this.initEcharts()
    }
  },
  methods: {
    resize(myChart) {
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    initEcharts() {
      let myChart = echarts.init(document.getElementById("temperature-line"))

      // 监听屏幕变化自动缩放图表
      this.resize(myChart)

      let option = {
        backgroundColor:'#1b2735',
        title: {
          text: '历史水温/℃',
          textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 16,
          },
          top: '-2%',
          left: '0',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ["水温"],
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)'
          },
          right: '4%'
        },
        grid: {
          top: '20%',
          left: '4%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日",],
          axisLabel: {
            textStyle: {
              color: 'rgb(0,253,255,0.6)'
            },

          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          splitNumber: 4,
          // Y轴坐标文字
          axisLabel: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgb(23,255,243,0.3)'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "历史水温",
            type: 'line',
            color: 'rgba(255,100,97)',
            smooth: true,
            label: {
              show: true,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(255,100,97,0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(255,100,97,0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            symbol: 'circle',
            symbolSize: 5,
            data: this.historyList.slice(0, 7)
                // [24, 25.2, 24.8, 25.9, 26.1, 24.8, 27]
          }
        ]
      }

      myChart.setOption(option)
    }
  },
  mounted() {
    this.initEcharts()
  }
}
</script>

<style scoped>

</style>
